{% extends "Industrial_Logs/base.html" %} {% block header %}
{% endblock header %} P_TH{% block content %}

    <script src="{{STATIC_URL}}dist/js/P_TH.js"></script>
    <link rel="stylesheet" href="{{STATIC_URL}}css/pageStyle.css" charset="utf-8">

    <div id="back" class="main">
        <h1 style="width:85%; color:wheat;text-align: center;font-family:cursive;font-weight:700;top:-20px;position: relative;top: 10px;margin-left: auto;margin-right: auto;">时间-压力/温度/湿度/PM(环比）</h1>
        <div style="width:80%; height: 85%;margin-left: auto;margin-right: auto;" id="all"  class="chart-container">
            <div style="height: 65%;margin:0px" id="box1"  class="chart-container" name="box">春
                <button style="float:right; margin:10px 30px 0px 15px; color:white;display:inline-block;width:50px; height:30px; background: #0e5b44;border-radius: 10px;" onclick="showC(0)">温度</button>
                <button style="float:right;  margin:10px 5px 0px 15px; color:white; display:inline-block;width:50px; height:30px; background: #0e5b44;border-radius: 10px" onclick="showC(1)">湿度</button>
                <button style="float:right; margin:10px 5px 0px 15px; color:white;display:inline-block;width:50px; height:30px; background: #0e5b44;border-radius: 10px;" onclick="showC(2)">压力</button>
                <button style="float:right;  margin:10px 5px 0px 15px; color:white; display:inline-block;width:50px; height:30px; background: #0e5b44;border-radius: 10px" onclick="showC(3)">PM</button>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;" id="C_0"  class="chart-container" name="boxC">春/温度</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="C_1"  class="chart-container" name="boxC">春/湿度</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="C_2"  class="chart-container" name="boxC">春/压力</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="C_3"  class="chart-container" name="boxC">春/PM</div>
            </div>
            <div style=" height: 65%;margin:0px; display: none" id="box2"  class="chart-container" name="box">夏
                <button style="float:right; margin:10px 30px 0px 15px; color:white;display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px;" onclick="showX(0)">温度</button>
                <button style="float:right;  margin:10px 5px 0px 15px; color:white; display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px" onclick="showX(1)">湿度</button>
                <button style="float:right; margin:10px 5px 0px 15px; color:white;display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px;" onclick="showX(2)">压力</button>
                <button style="float:right;  margin:10px 5px 0px 15px; color:white; display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px" onclick="showX(3)">PM</button>
            <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;" id="X_0"  class="chart-container" name="boxX"onclick="show(1)">夏/温度</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="X_1"  class="chart-container" name="boxX" onclick="show(1)">夏/湿度</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="X_2"  class="chart-container" name="boxX" onclick="show(1)">夏/压力</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="X_3"  class="chart-container" name="boxX" onclick="show(1)">夏/PM</div>
            </div>
            <div style="height: 65%;margin:0px; display: none" id="box3"  class="chart-container" name="box">秋
                <button style="float:right; margin:10px 30px 0px 15px; color:white;display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px;" onclick="showQ(0)">温度</button>
                <button style="float:right;  margin:10px 5px 0px 15px; color:white; display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px" onclick="showQ(1)">湿度</button>
                <button style="float:right; margin:10px 5px 0px 15px; color:white;display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px;" onclick="showQ(2)">压力</button>
                <button style="float:right;  margin:10px 5px 0px 15px; color:white; display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px" onclick="showQ(3)">PM</button>
            <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;" id="Q_0"  class="chart-container" name="boxQ" onclick="show(1)">秋/温度</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="Q_1"  class="chart-container"  name="boxQ" onclick="show(1)">秋/湿度</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="Q_2"  class="chart-container" name="boxQ" onclick="show(1)">秋/压力</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="Q_3"  class="chart-container" name="boxQ" onclick="show(1)">秋/PM</div>
            </div>
            <div style="height: 65%;margin:0px; display: none" id="box4"  class="chart-container" name="box">冬
                <button style="float:right; margin:10px 30px 0px 15px; color:white;display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px;" onclick="showD(0)">温度</button>
                <button style="float:right;  margin:10px 5px 0px 15px; color:white; display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px" onclick="showD(1)">湿度</button>
                <button style="float:right; margin:10px 5px 0px 15px; color:white;display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px;" onclick="showD(2)">压力</button>
                <button style="float:right;  margin:10px 5px 0px 15px; color:white; display:inline-block; width:50px; height:30px; background: #0e5b44;border-radius: 10px" onclick="showD(3)">PM</button>
            <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;" id="D_0"  class="chart-container" name="boxD" onclick="show(1)">冬/温度</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="D_1"  class="chart-container" name="boxD" onclick="show(1)">冬/湿度</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="D_2"  class="chart-container" name="boxD" onclick="show(1)">冬/压力</div>
                <div style="margin: 30px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="D_3"  class="chart-container" name="boxD" onclick="show(1)">冬/PM</div>
            </div>

            <div style="height: 35%;margin:0px" id=""  class="chart-container">
                <div style="border:2px solid #666;width:33%; height: 100%;float:left;margin:0px;" id="X"  class="chart-container" onclick="show(2)">夏季</div>
                <div style="border:2px solid #666;width:33%; height: 100%;float:left;margin:0px;" id="Q"  class="chart-container" onclick="show(3)">秋季</div>
                <div style="border:2px solid #666;width:32%; height: 100%;float:left;margin:0px;" id="D"  class="chart-container" onclick="show(4)">冬季</div>
            </div>
        </div>
    </div>
{#    <div id="back" class="main" style="height:90%;">#}
{#    #}
{#        <h1 style="color:wheat;text-align: center;font-family:cursive;font-weight:700;top:-20px;position: relative;top: 10px;">压力-温湿度</h1>#}
{#        <div style="border:2px solid #666;width:80%;height: 80%;float:left" id="P_TH_1"  class="chart-container"></div>#}
{#    </div>#}
    <script>
    var  width = $("#C_0").width();
    var  height = $("#C_0").height();
$("#C_1").css("width", width).css("height", height);
$("#C_2").css("width", width).css("height", height);
$("#C_3").css("width", width).css("height", height);
$("#X_0").css("width", width).css("height", height);
$("#X_1").css("width", width).css("height", height);
$("#X_2").css("width", width).css("height", height);
$("#X_3").css("width", width).css("height", height);
$("#Q_0").css("width", width).css("height", height);
$("#Q_1").css("width", width).css("height", height);
$("#Q_2").css("width", width).css("height", height);
$("#Q_3").css("width", width).css("height", height);
$("#D_0").css("width", width).css("height", height);
$("#D_1").css("width", width).css("height", height);
$("#D_2").css("width", width).css("height", height);
$("#D_3").css("width", width).css("height", height);


{#$("#PTH_PM_0").css("width", width).css("height", height);#}
{#$("#PTH_PM_1").css("width", width).css("height", height);#}


function show(id){
var boxs = document.getElementsByName("box");
for (var i = 0 ; i < boxs.length ; i++){
if (boxs[i].id == "box"+id ){
boxs[i].style.display=""
}else{
boxs[i].style.display="none"
}
}
}

function showC(id) {
    var boxCs = document.getElementsByName("boxC")
    for (var i = 0; i < boxCs.length; i++) {
        if (boxCs[i].id == "C_" + id) {
            boxCs[i].style.display = ""
        }else
        {
            boxCs[i].style.display = "none"
        }
    }
}
function showX(id) {
    var boxXs = document.getElementsByName("boxX")
    for (var i = 0; i < boxXs.length; i++) {
        if (boxXs[i].id == "X_" + id) {
            boxXs[i].style.display = ""
        }else
        {
            boxXs[i].style.display = "none"
        }
    }
}
function showQ(id) {
    var boxQs = document.getElementsByName("boxQ")
    for (var i = 0; i < boxQs.length; i++) {
        if (boxQs[i].id == "Q_" + id) {
            boxQs[i].style.display = ""
        }else
        {
            boxQs[i].style.display = "none"
        }
    }
}
function showD(id) {
    var boxDs = document.getElementsByName("boxD")
    for (var i = 0; i < boxDs.length; i++) {
        if (boxDs[i].id == "D_" + id) {
            boxDs[i].style.display = ""
        }else
        {
            boxDs[i].style.display = "none"
        }
    }
}
</script>
    <script>
    $(function () {
        //春
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "pressure",
                    "year": "2018",
                    "quarter": "1"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("pressure")
                    console.log(data);
                    showQuarter1P(data);      //显示2018年第一季度的压力随时间的变化
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "temperature",
                    "year": "2018",
                    "quarter": "1"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("temperature")
				    console.log(data);
                    showQuarter1T(data);      //显示2018年第一季度的温度随时间的变化
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "humidity",
                    "year": "2018",
                    "quarter": "1"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("humidity")
				    console.log(data);
                    showQuarter1H(data);      //显示2018年第一季度的湿度随时间的变化
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "   P1",
                    "year": "2018",
                    "quarter": "1"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("P1")
				    console.log(data);
                    showQuarter1PM(data);      //显示2018年第一季度的PM随时间的变化
				}
        });
        //夏
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "pressure",
                    "year": "2018",
                    "quarter": "2"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("pressure")
                    console.log(data);
                    showQuarter2P(data);      //显示2018年第二季度的压力随时间的变化

				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "temperature",
                    "year": "2018",
                    "quarter": "2"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("temperature")
				    console.log(data);
                    showQuarter2T(data);      //显示2018年第二季度的温度随时间的变化
                    showQuarter2(data);      //下面小图中的夏季，默认显示2018年第二季度的温度随时间的变化小
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "humidity",
                    "year": "2018",
                    "quarter": "2"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("humidity")
				    console.log(data);
                    showQuarter2H(data);      //显示2018年第二季度的湿度随时间的变化
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "   P1",
                    "year": "2018",
                    "quarter": "2"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("P1")
				    console.log(data);
                    showQuarter2PM(data);      //显示2018年第二季度的PM随时间的变化
				}
        });
        //秋
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "pressure",
                    "year": "2018",
                    "quarter": "3"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("pressure")
                    console.log(data);
                    showQuarter3P(data);      //显示2018年第三季度的压力随时间的变化
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "temperature",
                    "year": "2018",
                    "quarter": "3"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("temperature")
				    console.log(data);
                    showQuarter3T(data);      //显示2018年第三季度的温度随时间的变化
                    showQuarter3(data);      //下面小图中的秋季，默认显示2018年第三季度的温度随时间的变化小
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "humidity",
                    "year": "2018",
                    "quarter": "3"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("humidity")
				    console.log(data);
                    showQuarter3H(data);      //显示2018年第三季度的湿度随时间的变化
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "   P1",
                    "year": "2018",
                    "quarter": "3"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("P1")
				    console.log(data);
                    showQuarter3PM(data);      //显示2018年第三季度的PM随时间的变化
				}
        });
        //冬
         $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "pressure",
                    "year": "2018",
                    "quarter": "4"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("pressure")
                    console.log(data);
                    showQuarter4P(data);      //显示2018年第四季度的压力随时间的变化
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "temperature",
                    "year": "2018",
                    "quarter": "4"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("temperature")
				    console.log(data);
                    showQuarter4T(data);      //显示2018年第四季度的温度随时间的变化
                    showQuarter4(data);      //下面小图中的冬季，默认显示2018年第三季度的温度随时间的变化小
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "humidity",
                    "year": "2018",
                    "quarter": "4"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("humidity")
				    console.log(data);
                    showQuarter4H(data);      //显示2018年第四季度的湿度随时间的变化
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "   P1",
                    "year": "2018",
                    "quarter": "4"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("P1")
				    console.log(data);
                    showQuarter4PM(data);      //显示2018年第四季度的PM随时间的变化
				}
        });
        $.ajax({
				url: "/getDataQuarter",
				type: "POST",
                data: {
				    "name": "   P1",
                    "year": "2018",
                    "quarter": "4"
                },
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log("P1")
				    console.log(data);
                    showQuarter4PM(data);      //显示2018年第四季度的PM随时间的变化
				}
        });


        {#$.ajax({#}
        {#        {#       url: "/getPPM",#}
        {#        {#       type: "POST",#}
        {#        {#       async: true,#}
        {#        {#       cache:false,#}
        {#        {#       dataType: "json", //返回数据格式为json#}
        {#        {#       success: function(data) {//请求成功完成后要执行的方法#}
        {#        {#            console.log(data);#}
        {#        {#            P_TH_0(data);#}
        {#        {#       }#}
        {#        {# });#}
    })
    </script>
{% endblock content %}